<template>
	<view class="fixed tn-bg-white">
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
		<!-- 搜索框-START -->
		<block>
			<view class="tn-padding-sm  tn-border-solid-bottom">
				<view class="tn-flex ">
					<view class="userinfo">
						{{userinfo.FstaffName}}
					</view>
					<u-search class="tn-flex-2" searchIcon="scan" @clickIcon="GetCode" placeholder="扫码"
						v-model="localsearchForm.work_number" :showAction="false" @search="getList"></u-search>
					<view class="right tn-flex-1">
						<tn-button class="tn-round tn-flex-1" backgroundColor="#2074d4" fontColor="#FFFFFF"
							@click="getList">查</tn-button>
						<view v-if="showtime" class="more tn-flex-1 tn-color-black tn-icon-sequence-vertical"
							@click="more=true"></view>
					</view>
				</view>
			</view>
			<tn-popup v-model="more" mode="top">
				<view class="search">
					<tn-form :labelWidth="180" :model="localsearchForm" ref="sform" :errorType="['message']">
						<tn-form-item label="单号" prop="work_number">
							<tn-input v-model="localsearchForm.work_number" />
						</tn-form-item>
						<block v-if="localsearchForm.showgx">
							<tn-form-item label="工序" prop="procedurevalue" :required="true">
								<tn-input v-model="localsearchForm.procedurevalue" type="select"
									:selectOpen="procedureshow" @click="procedureshow = true" placeholder='所有工序' />
							</tn-form-item>
						</block>
						<tn-form-item label="时间范围" prop="date_start" v-if="showtime">
							<block>
								<view @click="calendar=true" class="" v-if="localsearchForm.date_start">
									{{localsearchForm.date_start}}至{{localsearchForm.date_end}}
								</view>
								<view @click="calendar=true" v-else>
									点击选择时间范围
								</view>
							</block>
						</tn-form-item>
					</tn-form>
					<view class="search-btn">
						<tn-button backgroundColor="#9e9e9e" class="reset" width="40%" @click="reset">重置</tn-button>
						<tn-button backgroundColor="#2074d4" fontColor="#FFFFFF" width="50%"
							@click="getList">搜索</tn-button>
					</view>
				</view>
			</tn-popup>
			<slot></slot>

			<tn-calendar v-model="calendar" mode="range" startText="开始" endText="结束" @close="calendar=false"
				@change="calendarConfirm"></tn-calendar>

		</block>
		<!-- 搜索框-END -->
		<block v-if="localsearchForm.showgx">
			<tn-select labelName="工序名称" valueName="工序名称" v-model="procedureshow" :list="procedurelist"
				@confirm="procedureconfirm"></tn-select>
		</block>

	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	export default {
		name: "SearchTop",
		data() {
			return {
				more: false,
				calendar: false,
				work_number: '',
				localsearchForm: {
					...this.searchForm
				}, // 初始化本地变量
				auth: {},
				procedureshow: false,
				procedurelist: [],
				FItemId: this.$storage.getStorageSync('FItemId')
			};
		},
		watch: {
			searchForm: {
				immediate: true,
				handler(newVal) {
					
					this.localsearchForm = {
						...newVal
					};
					if (this.localsearchForm.date_start) {
						setTimeout(() => {
							this.$refs.uNotify.show({
								top: 1,
								type: 'warning',
								color: '#fff',
								bgColor: '#2074d494',
								message: `当前展示${this.localsearchForm.date_start}至${this.localsearchForm.date_end}信息`,
								duration: 1000 * 2,
								fontSize: 14,
								safeAreaInsetTop: true
							})
						}, 500)
					}
					//如果是报工页面则重新获取工序列表
					if (this.FItemId == 10001 || this.FItemId == 10002) {
						this.$utils.debounce(this.getProcedureList, 500)
					}
				},
				deep: true
			},
			/**
			 *  
			 *  根据当前页面的类型判断当前页面是否需要自动获取列表信息；
			 */
			FItemId: {
				handler(newv, old) {
					this.auth = this.$user.getAuth(newv)
					console.log('this.auth',this.auth)
					if (this.auth.meta && this.auth.meta.type == 'VIEW') {
						this.search()
					}
				},
				immediate: true,
			}

		},
		props: {
			searchForm: {
				type: Object,
				default () {
					return {
						work_number: '',
						date_start: '',
						date_end: '',
						name: '',
						procedure: ''
					}
				}
			},
			showtime: {
				type: Boolean,
				default () {
					return true
				}
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.userinfo
			})
		},
		// 组件挂载完成后执行的代码
		mounted() {
			console.log('search组件已加载完成！');
			// this.getProcedureList();
		},
		methods: {
			search(){
				this.$emit('search', this.localsearchForm)
			},
			/**
			 * 获取该用户有权的工序列表
			 * 用于可选择工序列表渲染
			 */
			getProcedureList() {
				let that = this;
				that.$request({
					url: that.$api.procedure.list,
					data: {
						work_number: that.localsearchForm.work_number,
						Fstaffld: that.userinfo.Fstaffld
					}
				}).then(response => {
					if (response.code === 0) {
						that.procedurelist = response.list
						// that.search()
					}
				}).catch((msg) => {
					this.$t.message.toast(msg);
					this.$t.message.closeLoading();
				});
			},
			procedureconfirm(e) {
				this.localsearchForm.procedure = [e[0].label];
				this.localsearchForm.procedurevalue = e[0].label;
			},
			updateParent() {
				this.$emit('update:searchForm', this.localsearchForm);
			},
			setDate(e) {
				let that = this;
				let start = '';
				let end = that.$utils.getAgoDay(0)
				switch (e.index) {
					case 0:
						start = ''
						end = ''
						break;
					case 1:
						// 计算15天前的日期
						start = that.$utils.getAgoDay(15)
						break;
					case 2:
						start = that.$utils.getAgoDay(30)
						break;
					default:
				}
				that.localsearchForm.date_start = start
				that.localsearchForm.date_end = end
				this.search()
			},
			setType(e) {
				let that = this;
				let start = '';
				let end = that.$utils.getAgoDay(0)
				switch (e.index) {
					case 0:
						start = ''
						end = ''
						that.localsearchForm.status = -1
						break;
					case 1:
						// 待审
						that.localsearchForm.status = 0
						break;
					case 2:
						// 已审
						that.localsearchForm.status = 1
						break;
					case 3:
						// 今天
						start = that.$utils.getAgoDay(0)
						that.localsearchForm.status = -1
						break;
					case 4:
						// 昨天
						start = that.$utils.getAgoDay(1)
						end = that.$utils.getAgoDay(1)
						that.localsearchForm.status = -1
						break;
					default:
				}
				that.localsearchForm.date_start = start
				that.localsearchForm.date_end = end
				this.search()
			},
			calendarConfirm(e) {
				console.log(e);
				this.localsearchForm.date_start = e.startDate
				this.localsearchForm.date_end = e.endDate
				this.calendar = false
			},

			getList() {
				this.more = false
				this.search()
			},

			reset() {
				this.more = false
				this.localsearchForm.work_number = '';
				this.localsearchForm.date_end = '';
				this.localsearchForm.procedure = [];
				this.$refs.sform.resetFields()
				this.search()
			},
			GetCode() {
				let that = this;
				that.$jwx.scanQRCode().then(res => {
					console.log('组件', res)
					that.localsearchForm.work_number = res.toString();
					that.updateParent()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fixed {
		position: fixed;
		z-index: 999;
		width: 100%;
		top: -10upx;
	}

	.tn-flex-2 {
		flex: 2 !important;
	}

	.right {
		display: flex;
		flex-wrap: wrap;
		margin: 0 10upx;

		.more {
			margin: 0 10upx;
			font-size: 40upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.userinfo {
		display: flex;
		font-size: 26upx;
		align-items: center;
		padding-left: 6upx;
		padding-right: 20upx;
	}

	.search {
		background-color: #fff;
		padding: 10px;
		.search-btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 20upx;
			border-top: 2px solid #eee;
		}
	}
</style>